<template>
  <div id="monthlyPlanFrom">
    <h3>编制轨行区行车计划</h3>
    <div class="monthlyPlanFromSelect">
      <span class="monthlyPlanFromSelectTitle">选择机车</span>
      <el-select
        v-model="plan.locomotiveId"
        placeholder="请选择"
        style="margin-right: 2rem"
      >
        <el-option
          v-for="(item, index) in getLocomotiveListOptions"
          :label="item.deviceName"
          :value="item.id"
          :key="index"
        >
        </el-option>
      </el-select>

      <el-input
        v-model="planNum"
        class="monthlyPlanFromSelectInput"
        placeholder="自行生成"
        disabled
      ></el-input>
      <el-input
        v-model="plan.leaveLocNum"
        class="monthlyPlanFromSelectInput"
        placeholder="请输入出发车次"
      ></el-input>
      <el-input
        v-model="plan.returnLocNum"
        class="monthlyPlanFromSelectInput"
        placeholder="请输入返程车次"
      ></el-input>
      <el-button
        type="primary"
        @click="addFund()"
        style="margin-left: 1rem"
        >新增</el-button
      >
      <el-button
        type="primary"
        @click="sendKey(1)"
        style="margin-left: 1rem"
        >返回</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column label="行车线别">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.lineType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in lineTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="作业日期"
        width="280"
      >
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.leaveTime"
            type="datetime"
            placeholder="选择日期"
            style="width: 250px"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        label="出发位置"
        width="280"
      >
        <template
          slot-scope="scope"
          style="display: flex"
        >
          DK
          <el-input
            style="width: 100px"
            placeholder="千米"
            v-model="scope.row.leavePositionKm"
          >
          </el-input
          >+
          <el-input
            style="width: 100px"
            placeholder="米"
            v-model="scope.row.leavePositionM"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="到达位置"
        width="280"
      >
        <template
          slot-scope="scope"
          style="display: flex"
        >
          DK
          <el-input
            style="width: 100px"
            placeholder="千米"
            v-model="scope.row.arrivalPositionKm"
          >
          </el-input
          >+
          <el-input
            style="width: 100px"
            placeholder="米"
            v-model="scope.row.arrivalPositionM"
          >
          </el-input>
        </template>
      </el-table-column>

      <el-table-column label="行车速度">
        <template slot-scope="scope">
          <el-input
            style="width: 100px"
            placeholder="请输入内容"
            v-model="scope.row.speed"
          >
          </el-input
          >千米/小时
        </template>
      </el-table-column>
      <el-table-column label="到达时间">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.arrivalTime"
            type="datetime"
            placeholder="选择日期"
            style="width: 250px"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="批注">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入批注"
            v-model="scope.row.remark"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="removeFundBtn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button
        type="primary"
        @click="submit()"
        style="margin-left: 1rem"
        >提交</el-button
      >
      <el-button
        type="primary"
        @click="sendKey(1)"
        style="margin-left: 1rem"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getNumlocomotivePlan,
  getPlanNumlocomotivePlan,
  savelocomotivePlan,
  updatelocomotivePlan,
} from '/src/http/productSchedule/locomotivePlan.js'
import { getLocomotiveList } from '/src/http/productSchedule/locoMotMachineryMg.js'
import { getDataType } from '/src/http/productSchedule/dictionary.js'
export default {
  props: ['getKey', 'planId'],
  data() {
    return {
      tableData: [],
      lineTypeOptions: [],
      getLocomotiveListOptions: [],
      planNum: '',
      plan: {
        locomotiveId: '',
        leaveLocNum: '',
        returnLocNum: '',
      },
    }
  },
  mounted() {
    this.initialize()
  },
  methods: {
    initialize() {
      this.addFund()
      this.getDataTypeApi()
      this.LocomotiveList()
      this.PlanNumlocomotivePlan()
      if (this.planId) {
        console.log(this.planId)
        this.updateList()
      }
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    getDataTypeApi() {
      getDataType({ type: 'ht_line_type' }).then((res) => {
        if (res.code == 200) {
          this.lineTypeOptions = res.data
        }
      })
    },
    LocomotiveList() {
      getLocomotiveList().then((res) => {
        if (res.code == 200) {
          this.getLocomotiveListOptions = res.data
        }
      })
    },
    PlanNumlocomotivePlan() {
      getPlanNumlocomotivePlan().then((res) => {
        if (res.code == 200) {
          console.log(res)
          this.planNum = res.data
        }
      })
    },
    updateList() {
      getNumlocomotivePlan({ id: this.planId }).then((res) => {
        if (res.code == 200) {
          console.log(res)
          this.plan.locomotiveId = res.data.locomotiveId
          this.plan.leaveLocNum = res.data.leaveLocNum
          this.plan.returnLocNum = res.data.returnLocNum
          this.tableData = res.data.detailList
        }
      })
    },
    removeFundBtn(params) {
      this.tableData = this.tableData.filter((ele) => {
        var flag = false

        for (const key in params) {
          if (ele[key] != params[key]) {
            flag = true
            break
          }
        }
        return flag
      })

      if (!this.tableData.length) {
        this.addFund()
      }
    },
    addFund() {
      const newLine = {
        lineType: '',
        leaveTime: '',
        leavePositionKm: '',
        leavePositionM: '',
        arrivalPositionKm: '',
        arrivalPositionM: '',
        speed: '',
        arrivalTime: '',
        remark: '',
        date3: new Date(),
      }

      this.tableData.push(newLine)
    },
    async submit() {
      if (this.planId) {
        await this.$confirm('确认编辑该计划吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.plan.id = this.planId
            try {
              updatelocomotivePlan({
                planNum: this.planNum,
                plan: this.plan,
                detailList: this.tableData,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: 'success',
                    message: '提交成功!',
                  })
                  this.sendKey(1)
                }
              })
            } catch (error) {
              console.log('接口调用出错::: ', error)
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      } else {
        await this.$confirm('确认保存吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            try {
              savelocomotivePlan({
                plan: this.plan,
                detailList: this.tableData,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: 'success',
                    message: '提交成功!',
                  })
                  this.sendKey(1)
                }
              })
            } catch (error) {
              console.log('接口调用出错::: ', error)
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      }
    },
    sendKey(num) {
      this.getKey(num)
    },
  },
}
</script>
<style lang="less">
#monthlyPlanFrom {
  h3 {
    text-align: center;
    color: rgb(24, 144, 255);
    font-size: 20px;
  }
  .monthlyPlanFromSelect {
    width: 80%;
    margin: 0 auto;

    margin: 2rem auto;
    .monthlyPlanFromSelectTitle {
      margin-right: 2rem;
    }
    .monthlyPlanFromSelectInput {
      width: 13rem;
      margin-right: 1rem;
    }
  }
}
</style>
